<template>
	<view class="userWrap">
		<uv-navbar leftIcon=" " placeholder :titleStyle="{ color: '#fff' }" title="个人中心" bgColor="#3478F7"></uv-navbar>
		<view class="cardBg">
			<view class="userBox">
				<view class="userInfo">
					<uv-avatar size="60" src="https://gd-hbimg.huaban.com/d84daecd9a8c747e7561d7d1e836a957ebc66607557e-dAZQYo"></uv-avatar>
					<view class="info">
						<view class="nickname">汪星人</view>
						<view class="phone">{{ $f.encryptPhone('15500000000') }}</view>
					</view>
				</view>
				<view class="message">
					<uv-badge :customStyle="{ zIndex: 9 }" absolute :offset="[-4, -4]" max="99" :value="6"></uv-badge>
					<uv-icon name="chat-fill" color="#fff" size="60rpx"></uv-icon>
				</view>
			</view>
		</view>
		<view class="card">
			<uv-grid :col="2">
				<uv-grid-item>
					<view class="icon">
						<uv-icon size="48rpx" color="#000" name="jiuzhenren" custom-prefix="icon"></uv-icon>
					</view>
					<view class="tit">就诊人管理</view>
				</uv-grid-item>
				<uv-grid-item>
					<view class="icon">
						<uv-icon size="48rpx" color="#000" name="zhuyuanrenshu" custom-prefix="icon"></uv-icon>
					</view>
					<view class="tit">住院人管理</view>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view class="cellBox">
			<uv-cell-group>
				<uv-cell isLink icon="setting-fill" title="预约挂号记录">
					<view class="icon" slot="icon">
						<uv-icon size="48rpx" color="#666" name="yuyue" custom-prefix="icon"></uv-icon>
					</view>
				</uv-cell>
				<uv-cell isLink icon="setting-fill" title="门诊缴费记录">
					<view class="icon" slot="icon">
						<uv-icon size="48rpx" color="#666" name="jiaofei_jiaofei" custom-prefix="icon"></uv-icon>
					</view>
				</uv-cell>
				<uv-cell isLink icon="setting-fill" title="门诊充值记录">
					<view class="icon" slot="icon">
						<uv-icon size="48rpx" color="#666" name="chongzhi" custom-prefix="icon"></uv-icon>
					</view>
				</uv-cell>
				<uv-cell isLink icon="setting-fill" title="住院充值记录">
					<view class="icon" slot="icon">
						<uv-icon size="48rpx" color="#666" name="zhuyuanchongzhijilu" custom-prefix="icon"></uv-icon>
					</view>
				</uv-cell>
				<uv-cell isLink icon="setting-fill" title="体检预约记录">
					<view class="icon" slot="icon">
						<uv-icon size="48rpx" color="#666" name="tijian" custom-prefix="icon"></uv-icon>
					</view>
				</uv-cell>
				<uv-cell isLink icon="setting-fill" title="问题反馈记录">
					<view class="icon" slot="icon">
						<uv-icon size="48rpx" color="#666" name="changjianwentixiangguanwenti" custom-prefix="icon"></uv-icon>
					</view>
				</uv-cell>
			</uv-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.userWrap {
	min-height: 100vh;
	background-color: #f5f5f5;
	.cardBg {
		background-color: #3478f7;
		padding: 0 30rpx;
		height: 300rpx;
		padding-top: 1px;
		.userBox {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.userInfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;
				.info {
					margin-left: 30rpx;
					.nickname {
						font-size: 34rpx;
					}
					.phone {
						font-size: 28rpx;
						margin-top: 8rpx;
					}
				}
			}
			.message {
				position: relative;
			}
		}
	}
	.card {
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		width: 650rpx;
		margin: -100rpx auto 0;
		.icon {
			margin: 0 auto;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f5f5f5;
		}
		.tit {
			font-size: 26rpx;
			margin-top: 10rpx;
			color: #666;
		}
	}
	.cellBox{
		width: 690rpx;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		.icon{
			margin-right: 10rpx;
			padding: 10rpx 0;
		}
	}
}
</style>
